<template>
  <div
    class="community"
    :style="{ backgroundImage: `url(${QNURL + articleData.cover})` }"
  >
    <Header />
    <!-- <img class="top_img" src="@/assets/images/1.jpg" alt="" /> -->
    <div class="box">
      <div class="top_content">
        <div class="info">
          <div class="title">{{ articleData.title }}</div>
          <div class="info-content">
            <div class="label">
              <svg class="label-icon icon" aria-hidden="true">
                <use xlink:href="#icon-fabiaowenzhang" />
              </svg>
              <span>发布时间：{{ articleData.createTime }}</span>
            </div>
            <div class="label">
              <div>
                <svg class="label-icon icon" aria-hidden="true">
                  <use xlink:href="#icon-gengxin3" />
                </svg>
                <span>更新时间：{{ articleData.updateTime }}</span>
              </div>
            </div>
          </div>
          <div class="digest">
            {{ articleData.digest }}
          </div>
        </div>
      </div>
      <main>
        <div class="container">
          <div class="content">
            <article
              class="line-numbers show-language language-javascript xxxxx9"
              ref="codeContainer"
              v-html="articleData.content"
            />
          </div>
          <Comment showAvator class="article-comment" @sendBtn="sendBtn" />
          <CommentList :data="commentList" @sendBtn="sendBtn" />
        </div>
        <div class="card">
          <!-- <InfoCard :data="userInfoData" @avatarClickHandle="avatarClickHandle" />
        <RankCard class="mt-20" /> -->
        </div>
      </main>
    </div>
    <RightBottomNav />
  </div>
</template>

<script setup lang="ts">
import Header from "@/components/header/Header.vue";
// import InfoCard from "@/components/partials/info-card/index";
// import RankCard from "@/components/partials/rank-card/index";
import Comment from "@/components/comment/Comment.vue";
import CommentList from "@/components/comment/CommentList.vue";
import { useArticle } from "./articleHook";
import { onMounted, ref } from "vue";

import "prismjs/themes/prism-tomorrow.css";
import "prismjs/components/prism-javascript";
import "prismjs/plugins/line-numbers/prism-line-numbers.min.js"; //行号插件
import "prismjs/plugins/line-numbers/prism-line-numbers.min.css"; //行号插件的样式
// import "prismjs/plugins/show-language/prism-show-language";
import "prismjs/plugins/highlight-keywords/prism-highlight-keywords.js";
import "prismjs/plugins/show-language/prism-show-language.min.js";
import { QNURL } from "@/config/urlConfig";
import RightBottomNav from "@/components/right-bottom-nav/RightBottomNav.vue";
// import "prismjs/plugins/toolbar/prism-toolbar.min.js";
// import "prismjs/plugins/toolbar/prism-toolbar.min.css";

const { articleData, commentList, sendBtn } = useArticle();

let codeContainer = ref();

onMounted(() => {
  // Prism.highlightAllUnder(codeContainer.value);
});
</script>

<style lang="scss" scoped>
$containerPadding: 20px;
.community {
  width: 100%;
  min-height: 100vh;
  position: relative;
  background-size: cover;

  // .top_img {
  //   width: 100%;
  //   position: absolute;
  //   top: 0;
  //   left: 0;
  //   z-index: -1;
  // }

  // -webkit-backdrop-filter: blur(5px);

  .box {
    // position: absolute;
    width: 100%;
    // height: 100%;
    top: 0;
    background-color: rgba(99, 95, 95, 0.2);
    backdrop-filter: blur(5px);
    // overflow-y: scroll;

    main {
      width: 100%;
      min-height: 400px;
      display: flex;
      justify-content: center;
      padding-bottom: 20px;
    }
  }
}

.top_content {
  width: 100%;
  height: 350px;

  .info {
    width: 100%;
    height: 100%;
    // background-color: rgba(99, 95, 95, 0.5);
    // backdrop-filter: blur(5px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #000;
    mix-blend-mode: difference;
    // padding-top: var(--header-nav-height);

    .digest {
      width: 800px;
      margin-top: 30px;
      color: #333;
      text-align: center;
    }

    .title {
      font-size: 30px;
      font-weight: bold;
    }

    &-content {
      margin-top: 20px;
      display: flex;

      .label {
        font-size: 14px;
        font-weight: bold;
        padding: 0 10px;
        border-right: 1.5px solid #fff;

        &:last-of-type {
          border: none;
        }
      }
    }
  }
}

.container {
  width: 1000px;
  min-height: 900px;
  border-radius: 10px;
  border: 1px solid #ccc;
  background-color: #fff;
  margin-right: 20px;
  padding: $containerPadding;

  .content {
    width: 100%;
    overflow: hidden;
    margin-bottom: 40px;
    padding-bottom: 60px;
    border-bottom: 1px dashed #ccc;
  }

  &:hover {
    border-color: red;
  }
}

// .card {
//   width: 300px;
//   overflow: hidden;
// }

.label-icon {
  width: 13px;
  height: 13px;
  margin-right: 5px;
  vertical-align: -2px;
}

// .community-comment {
//   position: fixed;
//   width: 800px;
//   padding: 0 $containerPadding;
// }
community {
  :deep(img) {
    width: 100%;
    height: auto;
  }

  :deep(table) {
    border: 1px solid #ccc;

    td,
    th {
      border: 1px solid #ccc;
      padding: 0px 5px;
      height: 30px;
    }
  }
}
</style>
